<template>
  <div class="line-echart">
    <base-echart class="echart" :options="Option"></base-echart>
  </div>
</template>

<script setup>
import { computed } from "vue";
import baseEchart from "../config/base-echart.vue";

const props = defineProps({
  option: Object,
});

const Option = computed(() => {
  return {
    // title: {
    //   text: props.option.title,
    //   // text: "props.option.title",
    // },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let relVal = params[0].name;
        // console.log(params)
        for (let i = 0; i < params.length; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            params[i].seriesName +
            " : " +
            params[i].value +
            "°";
        }
        return relVal;
      },
      // formatter: "{value}°",
    },
    grid: {
      left: "4%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: props.option.legend,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}°",
      },
    },
    series: [
      {
        name: "最高温度",
        type: "line",
        data: props.option.maxTmp,
        color: "#f18360",
        smooth: true,
        showSymbol: false,
      },
      {
        name: "平均温度",
        type: "line",
        data: props.option.avgTmp,
        color: "#fcb25c",
        smooth: true,
        showSymbol: false,
      },
      {
        name: "最低温度",
        type: "line",
        data: props.option.minTmp,
        color: "#427bff",
        smooth: true,
        showSymbol: false,
      },
    ],
  };
});
</script>

<style lang="less" scoped>
.line-echart {
  padding: 0 16px;
}
</style>